<!-- 雷达图 -->
<template>
  <div :class="['radar-con']">
    <div
      class="w-100p h-100p radar-box"
      :class="[backgroundImg]"
      :style="{ transform: 'rotate(' + deg + ')', ...imgStyle }"
    ></div>
    <div :class="['title-item', item.x, item.y]" v-for="(item, index) in indicator" :key="index">{{ item.name }}</div>
  </div>
</template>

<script>
export default {
  name: "RadarChart",
  components: {},
  props: {
    backgroundImg: {
      type: String,
      default: "item0",
    },
    deg: {
      type: String,
      default: "",
    },
    imgStyle: {},
    indicator: {
      type: Array,
      default: () => [],
    },
  },
  computed: {},
};
</script>
<style scoped lang="scss">
.radar-con {
  position: relative;
  height: 100%;
  .radar-box {
    position: relative;
    background-position-y: 26px;
    background-repeat: no-repeat;
    transform-origin: 50% 50%;
  }
  .item0 {
    background-image: url("~@/assets/images/item0.png");
    background-size: 111px 105px;
    background-position-x: 179px;
    background-position-y: 14px;
  }
  .item1 {
    background-image: url("~@/assets/images/item1.png");
    background-size: 113px 99px;
    background-position-x: 176px;
  }
  .item2 {
    background-image: url("~@/assets/images/item2.png");
    background-size: 108px 104px;
    background-position-x: 186px;
  }
  .item3 {
    background-image: url("~@/assets/images/item3.png");
    background-size: 107px 103px;
    background-position-x: 170px;
  }
  .title-item {
    position: absolute;
    color: #ffffff;
    white-space: pre-wrap;
    text-align: center;
    // transform: rotate(-60deg)
  }
  .px192 {
    left: 192px;
  }
  .px39 {
    left: 39px;
  }
  .px300 {
    left: 300px;
  }
  .px110 {
    left: 110px;
  }
  .px296 {
    left: 296px;
  }
  .py-10 {
    top: -10px;
  }
  .py46 {
    top: 46px;
  }
  .py96 {
    top: 96px;
  }
  .px137 {
    left: 137px;
  }
  .px279 {
    left: 279px;
  }
  .px81 {
    left: 81px;
  }
  .px307 {
    left: 307px;
  }
  .px51 {
    left: 51px;
  }
  .px285 {
    left: 285px;
  }
  .py13 {
    top: 13px;
  }
  .py66 {
    top: 66px;
  }
  .py114 {
    top: 114px;
  }
  .px186 {
    left: 186px;
  }
  .px255 {
    left: 255px;
  }
  .px117 {
    left: 117px;
  }
  .px294 {
    left: 294px;
  }
  .px100 {
    left: 100px;
  }
  .px107 {
    left: 107px;
  }
  .px309 {
    left: 309px;
  }
  .px103 {
    left: 103px;
  }
  .px304 {
    left: 304px;
  }
  .px138 {
    left: 138px;
  }
  .px264 {
    left: 264px;
  }
  .py7 {
    top: 7px;
  }
  .py9 {
    top: 9px;
  }
  .py25 {
    top: 25px;
  }
  .py31 {
    top: 31px;
  }
  .py56 {
    top: 56px;
  }
  .py70 {
    top: 70px;
  }
  .py88 {
    top: 88px;
  }
  .py102 {
    top: 102px;
  }
  .py123 {
    top: 123px;
  }
  .py125 {
    top: 125px;
  }
  .px232 {
    left: 232px;
  }
  .px96 {
    left: 96px;
  }
  .px276 {
    left: 276px;
  }
  .px78 {
    left: 78px;
  }
  .px290 {
    left: 290px;
  }
  .px82 {
    left: 82px;
  }
  .px290 {
    left: 290px;
  }
  .px90 {
    left: 90px;
  }
  .px246 {
    left: 246px;
  }
  .py2 {
    top: 2px;
  }
  .py13 {
    top: 13px;
  }
  .py27 {
    top: 27px;
  }
  .py51 {
    top: 51px;
  }
  .py66 {
    top: 66px;
  }
  .py85 {
    top: 85px;
  }
  .py103 {
    top: 103px;
  }
  .py116 {
    top: 116px;
  }
  .py127 {
    top: 127px;
  }
}
</style>
